<template>
  <div>
    <van-search
      class="search"
      v-model="value"
      show-action
      background="#eb5f09"
      placeholder="请输入小区或地址"
    >
      <template #left>
        <van-icon
          name="arrow-left"
          color="white"
          size="22"
          @click="$router.push('/home')"
        />
      </template>
      <template #label>
        <div class="label" @click="getCity(city)">
          <i>{{ city.label }}</i>
          <!-- <van-icon name="arrow-down" /> -->
        </div>
        <span>|</span>
      </template>
      <template #action>
        <van-icon
          class="right"
          name="location-o"
          size="22"
          color="white"
          @click="$router.push('/map')"
        >
        </van-icon>
      </template>
    </van-search>
    <!-- <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker :columns="columns" @confirm="onConfirm" />
          <div style="display: flex">
            <van-button plain type="primary" style="border: none; flex: 1"
              >取消</van-button
            >
            <van-button type="info" style="flex: 2">确认</van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="方式">
          <van-picker :columns="columns1" />
          <div style="display: flex">
            <van-button plain type="primary" style="border: none; flex: 1"
              >取消</van-button
            >
            <van-button type="info" style="flex: 2">确认</van-button>
          </div>
        </van-dropdown-item>

        <van-dropdown-item title="租金" ref="downt">
          <van-picker :columns="columns2" show-toolbar toolbar-position="bpttom" />
          <div style="display: flex">
            <van-button plain type="primary" @click="$refs.downt.toggle(false)" style="border: none; flex: 1"
              >取消</van-button
            >
            <van-button @click="$refs.downt.toggle(false)" type="info" style="flex: 2">确认</van-button>
          </div>
        </van-dropdown-item>
        <van-dropdown-item title="筛选" @open="showPopup" overlay=false>
          <van-popup
            v-model="show"
            position="right"
            :style="{ height: '100%', width: '70%' }"
          >
            <div class="select">
              <h5>户型</h5>
              <div class="tag">
                <span v-for="(item,index) in roomType" :key="index">{{
                  item.label
                }}</span>
              </div>
            </div>
            <div class="select">
              <h5>朝向</h5>
              <div class="tag">
                <span v-for="(item,index) in oriented" :key="index">{{
                  item.label
                }}</span>
              </div>
            </div>
            <div class="select">
              <h5>楼层</h5>
              <div class="tag">
                <span v-for="(item,index) in floor" :key="index">{{ item.label }}</span>
              </div>
            </div>
            <div class="select">
              <h5>房屋亮点</h5>
              <div class="tag">
                <span v-for="(item,index) in roomDetail" :key="index">{{
                  item.label
                }}</span>
              </div>
            </div>
            <div style="display: flex">
              <van-button plain type="primary" style="border: none; flex: 1"
                >取消</van-button
              >
              <van-button type="info" style="flex: 2">确认</van-button>
            </div>
          </van-popup>
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky> -->

    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="区域" ref="dropdown">
          <van-picker
            show-toolbar
            :columns="columns"
            toolbar-position="bottom"
            @cancel="onCancel"
            @confirm="onConfirm"
          />
        </van-dropdown-item>
        <van-dropdown-item title="方式" ref="dropdownone">
          <van-picker
            show-toolbar
            :columns="columns1"
            @cancel="onCancel"
            toolbar-position="bottom"
          />
        </van-dropdown-item>
        <van-dropdown-item title="租金" ref="dropdowntwo">
          <van-picker
            show-toolbar
            :columns="columns2"
            @cancel="onCancel"
            toolbar-position="bottom"
          />
        </van-dropdown-item>
        <van-dropdown-item title="筛选" @open="show = true"></van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>

    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    >
      <div class="select">
        <h5>户型</h5>
        <div class="tag">
          <span v-for="(item, index) in roomType" :key="index">{{
            item.label
          }}</span>
        </div>
      </div>
      <div class="select">
        <h5>朝向</h5>
        <div class="tag">
          <span v-for="(item, index) in oriented" :key="index">{{
            item.label
          }}</span>
        </div>
      </div>
      <div class="select">
        <h5>楼层</h5>
        <div class="tag">
          <span v-for="(item, index) in floor" :key="index">{{
            item.label
          }}</span>
        </div>
      </div>
      <div class="select">
        <h5>房屋亮点</h5>
        <div class="tag">
          <span v-for="(item, index) in roomDetail" :key="index">{{
            item.label
          }}</span>
        </div>
      </div>
    </van-popup>

    <div class="content" v-for="(item, index) in findList" :key="index">
      <div class="left">
        <img :src="'http://liufusong.top:8080' + item.houseImg" alt="" />
      </div>
      <div class="right">
        <h4>{{ item.title }}</h4>
        <p>{{ item.desc }}</p>
        <span v-for="(item, index) in item.tags" :key="index">{{ item }}</span>
        <p>{{ item.price }} 元/月</p>
      </div>
    </div>
  </div>
</template>

<script>
import { setArea, getAreas } from '@/utils/storage'
import { findCity, getcityList } from '@/api/area'
import { changeLabel } from '@/utils/labels'
import { Toast } from 'vant'
export default {
  data() {
    return {

      findList: [],
      show: false,
      city: JSON.parse(getAreas()),
      value: '',
      columns: [],
      columns1: [],
      columns2: [],
      roomType: [],
      oriented: [],
      floor: [],
      roomDetail: [],
      val: []
    }
  },
  async created() {
    const res = await findCity(JSON.parse(getAreas()).value)
    console.log(res)
    const obj = {}
    const obj1 = {}
    changeLabel(obj, res.data.body.area)
    changeLabel(obj1, res.data.body.subway)
    // console.log(obj)
    // console.log(obj1)
    this.columns.push(obj, obj1)

    console.log(this.columns)

    const arr = res.data.body.rentType
    arr.forEach((item) => {
      this.columns1.push(item.label)
    })
    const arr1 = res.data.body.price
    arr1.forEach((item) => {
      this.columns2.push(item.label)
    })
    // console.log(this.columns2)

    const res1 = await getcityList()
    this.findList = res1.data.body.list
    // console.log(this.findList)
    this.roomType = res.data.body.roomType
    this.oriented = res.data.body.oriented
    this.floor = res.data.body.floor
    this.roomDetail = res.data.body.characteristic
    // console.log(this.roomType)
  },
  methods: {
    getCity(city) {
      setArea(JSON.stringify(city))
      this.$router.push('/areas')
    },
    showPopup() {
      this.show = true
    },
    onConfirm() {

    },
    onCancel() {
      Toast.success('已取消')
      this.$refs.dropdown.toggle(false)
      this.$refs.dropdownone.toggle(false)
      this.$refs.dropdowntwo.toggle(false)
    }
  },
  components: {}
}
</script>

<style scoped lang="less">
.search {
  // position: fixed;
  // top: 0;
  // left: 0;
  height: 50px;
  width: 100%;
  z-index: 999;
  display: flex;
  flex: 1;
  .label {
    display: inline-block;
    i::after {
      content: '';
      position: relative;
      top: 12px;
      width: 0;
      height: 0;
      border-style: solid;

      border-width: 8px 5px 0 5px;
      border-color: #000 transparent transparent transparent;
    }
  }
  span {
    height: 100%;
    margin: 0 3px 0 8px;
    color: #ccc;
  }
  .right {
    width: 28px;
    height: 28px;
    border: 1px solid white;
    text-align: center;
    line-height: 26px;
    border-radius: 50%;
  }
  .van-icon-arrow-left:before {
    margin-right: 15px;
  }
}
// ::v-deep .van-dropdown-menu__bar--opened {
//   z-index: 10;
// }
.select {
  width: 100%;
  min-height: 100px;
  // background-color: lightblue;
  padding: 15px 15px;
  h5 {
    font-size: 16px;
  }
  .tag {
    width: 220px;
    // background-color: orange;
    margin: 15px 15px;
    // padding-left: 20px;
    border-bottom: 1px solid #999;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding-bottom: 20px;
    span {
      width: 90px;
      height: 26px;
      line-height: 26px;
      color: #999;
      font-size: 14px;
      // background-color: aqua;
      border: 1px solid #ccc;
      text-align: center;
      margin-left: 15px;
      margin-bottom: 10px;
      border-radius: 2px;
    }
  }
}

::v-deep .van-picker__toolbar {
  .van-picker__cancel {
    width: 30%;
  }
  .van-picker__confirm {
    width: 70%;
    color: #fff;
    background-color: orange;
  }
}

.content {
  display: flex;
  // justify-content: center;
  align-items: center;
  width: 100%;
  height: 120px;
  border-bottom: 1px solid #999;
  .left {
    width: 70px;
    height: 70px;
    margin: 0 15px;
    border-radius: 50%;
    overflow: hidden;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .right {
    flex: 1;
  }
}
</style>
